{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<SyncHeader @title={{this.header.title}} @breadcrumbs={{this.header.breadcrumbs}} />

<hr class="is-marginless has-background-gray-200" />

<form {{on "submit" (perform this.save)}} class="has-top-margin-l">
  <MessageError @errorMessage={{this.error}} />
  {{#each @form.formFieldGroups as |fieldGroup|}}
    {{#each-in fieldGroup as |group fields|}}
      {{#if (not-eq group "default")}}
        <hr class="has-top-margin-xl has-bottom-margin-l has-background-gray-200" />
        <Hds::Text::Display
          @tag="h2"
          @size="400"
          @weight="bold"
          data-test-destination-header={{group}}
        >{{group}}</Hds::Text::Display>
        <Hds::Text::Body
          @tag="p"
          @size="100"
          @color="faint"
          class="has-bottom-margin-m"
          data-test-destination-subText={{group}}
        >
          {{this.groupSubtext group @form.isNew}}
        </Hds::Text::Body>
      {{/if}}
      {{#each fields as |attr|}}
        {{#if (and (eq group "Credentials") (not @form.isNew))}}
          <EnableInput data-test-enable-field={{attr.name}} class="field" @attr={{attr}}>
            <FormField @attr={{attr}} @model={{@form}} @modelValidations={{this.modelValidations}} />
          </EnableInput>
        {{else}}
          <FormField
            @attr={{attr}}
            @model={{@form}}
            @modelValidations={{this.modelValidations}}
            @onKeyUp={{this.updateWarningValidation}}
          />
        {{/if}}
      {{/each}}
    {{/each-in}}
  {{/each}}

  <hr class="has-background-gray-200 has-top-margin-l" />
  <Hds::ButtonSet class="has-bottom-margin-m">
    <Hds::Button
      @text={{if @form.isNew "Create destination" "Save"}}
      @icon={{if this.save.isRunning "loading"}}
      type="submit"
      disabled={{this.save.isRunning}}
      data-test-save
    />
    <Hds::Button
      @text="Cancel"
      @color="secondary"
      disabled={{this.save.isRunning}}
      {{on "click" this.cancel}}
      data-test-cancel
    />
    {{#if this.invalidFormMessage}}
      <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormMessage}} @mimicRefresh={{true}} />
    {{/if}}
  </Hds::ButtonSet>
</form>